<script setup>
import { reactive } from 'vue'

let searchRegionForm = reactive({
  orderType: 0,
  paymentMethod: 0,
  timeRange: null,
  searchCondition: 0,
  searchValue: '',
})
const emits = defineEmits(['searchEvent', 'resetEvent'])
function onTapSearchButton() {
  emits('searchEvent')
}
function onTapResetButton() {
  Object.assign(searchRegionForm, {
    orderType: 0,
    paymentMethod: 0,
    timeRange: null,
    searchCondition: 0,
    searchValue: '',
  })
  emits('resetEvent')
}
defineExpose({
  searchRegionForm,
})
</script>

<template>
  <div class="search-region">
    <el-form :inline="true" :model="searchRegionForm">
      <el-form-item label="订单类型:">
        <el-select v-model="searchRegionForm.orderType" style="width: 100px">
          <el-option :value="0" label="全部订单" />
          <el-option :value="1" label="普通订单" />
          <el-option :value="2" label="秒杀订单" />
        </el-select>
      </el-form-item>
      <el-form-item label="支付方式:">
        <el-select v-model="searchRegionForm.paymentMethod" style="width: 150px">
          <el-option :value="0" label="全部" />
          <el-option :value="1" label="微信支付" />
          <el-option :value="2" label="余额支付" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间:">
        <el-date-picker
          v-model="searchRegionForm.timeRange"
          end-placeholder="结束日期"
          range-separator="-"
          start-placeholder="开始日期"
          style="width: 300px"
          type="daterange"
        />
      </el-form-item>
      <el-form-item label="关键词:">
        <el-select v-model="searchRegionForm.searchCondition" class="select-keyword" style="width: 100px">
          <el-option :value="0" label="全部" />
          <el-option :value="1" label="订单号" />
          <el-option :value="2" label="会员昵称" />
          <el-option :value="3" label="会员ID" />
          <el-option :value="4" label="收货人" />
          <el-option :value="5" label="收货电话" />
          <el-option :value="6" label="商品名称" />
        </el-select>
        <el-input
          v-model="searchRegionForm.searchValue"
          class="input-keyword"
          placeholder="请输入关键词"
          style="width: 240px"
        />
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="onTapSearchButton">查询</el-button>
    <el-button type="default" @click="onTapResetButton">重置</el-button>
  </div>
</template>

<style lang="scss" scoped>
.search-region {
}
/* 移除 el-select 右侧圆角（正确层级） */
:deep(.select-keyword .el-select__wrapper) {
  border-radius: 4px 0 0 4px !important; /* 只保留左侧圆角 */
  background-color: #fafafa;
}

/* 移除 el-input 左侧圆角（正确层级） */
:deep(.input-keyword .el-input__wrapper) {
  border-radius: 0 4px 4px 0 !important; /* 只保留右侧圆角 */
  margin-left: -1px; /* 抵消边框重叠 */
  border-left: none; /* 彻底移除左侧边框，避免重叠残留 */
}

/* 聚焦状态优化 */
:deep(.select-keyword .el-select__wrapper:focus-within) {
  z-index: 1; /* 确保聚焦边框不被 input 覆盖 */
}
</style>
